<template>
	<div>
		<el-row class="bg">
			<el-col :span="24">
				<el-form :inline="true" :model="dataForm" ref="dataForm">
					<el-form-item prop="dcu" class="doorNuTxt" label="门控单元编号："
						style="margin-right: 2.6vw; margin-bottom: 0">
						<el-select v-model="dataForm.dcu" filterable multiple collapse-tags clearable placeholder="请选择"
							style="width: 12vw;min-width: 155px;" @change="doorChange">
							<el-checkbox v-model="checkOptions.checkAll" :style="{ padding: '5px 20px' }"
								:indeterminate="checkOptions.isIndeterminate" @change="handleCheckAllChange">
								全选
							</el-checkbox>
							<el-option v-for="(item, index) in options" :key="index" :label="item.dcu"
								:value="item.dcu"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="baseInfoBtnRight">
						<el-button class="baseInfoBtn1" type="primary" @click="getDateData">读取
						</el-button>
					</el-form-item>
				</el-form>

			</el-col>
		</el-row>
		<el-row class="bg1">
			<el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%;" class="formBox">
				<el-table-column prop="dcuId" label="dcuId" header-align="center" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.dcuId<129">{{Number(scope.row.dcuId)+stepUp}}</span>
						<span v-else>{{Number(scope.row.dcuId) - 128 + stepDown}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="cpu0" label="cpu1温度" header-align="center" align="center"></el-table-column>
				<el-table-column prop="cpu1" label="cpu2温度" header-align="center" align="center"></el-table-column>
			</el-table>
			<!-- <el-pagination background :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
				:total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
				@current-change="pageCurrentChangeHandle">
			</el-pagination> -->
		</el-row>
	</div>
</template>

<script>
	import {
		getOrder,
		getStep
	} from "@/utils";
	import qs from 'qs'
	export default {
		data() {
			return {
				dataForm: {
					dcu: ''
				},
				options: [],
				checkOptions: {
					isIndeterminate: false,
					checkAll: false,
				},
				stepUp: 0, //上行门的step值
				stepDown: 0, //下行门的step值
				dataListLoading: false,
				page: 1,
				limit: 10,
				total: 0,
				dataList: []
			}
		},
		activated() {
			this.init();
		},
		methods: {
			init() {
				var p0 = new Promise((resolve, reject) => {
					this.getdoorList(() => {
						resolve();
					});
				});
				Promise.all([p0]).then(() => {
					// this.getDCUData()
					// this.initEcharts()
				});
			},
			//读取温度
			getDateData() {
				var dcuId = [];
				if (this.dataForm.dcu.length == 0) {
					this.$message.error('请选择门控单元编号');
					return false
				} else {
					if (this.checkOptions.checkAll) {
						dcuId.push('FF')
					} else {
						this.dataForm.dcu.forEach(value => {
							const findIntem = this.options.find(item => item.dcu === value);
							if (findIntem.stationSide == 1) {
								var dcuIdNew = value - this.stepUp;
								dcuId.push(dcuIdNew)
							}
							if (findIntem.stationSide == 0) {
								var dcuIdNew = Number(value) - this.stepDown + 128;
								dcuId.push(dcuIdNew)
							}
						})
					}
					this.getdoorTemperature(dcuId);
				}
			},
			//获取温度
			getdoorTemperature(dcuId) {
				let _this = this
				this.$http.post(`/psc/dcu/readCPUTemperatureAll`, dcuId).then((res) => {
					if (res.data.code !== 0) {
						return this.$message.error(res.data.msg);
					}
					this.$message({
						message: this.$t("prompt.success"),
						type: "success",
						duration: 500,
						onClose: () => {
							this.dataList = res.data.data
						},
					});
				});
			},
			//改变门的编号
			doorChange() {
				const nowLength = this.dataForm.dcu.length;
				this.checkOptions.isIndeterminate =
					nowLength > 0 && nowLength < this.options.length;
				this.checkOptions.checkAll = nowLength == this.options.length;
				this.$forceUpdate();
			},
			// 流向全选
			handleCheckAllChange(e) {
				this.dataForm.dcu = e ? this.options.map((item) => item.dcu) : [];
				this.checkOptions.isIndeterminate = false;
			},
			getdoorList(callback) {
				this.$http
					.get("/psc/door/getDoor")
					.then((res) => {
						//获取上下行数据要增加和减少的值-----2023年5月26日
						this.stepUp = getStep(res.data.data.up)
						this.stepDown = getStep(res.data.data.down)
						this.options = res.data.data.up.concat(res.data.data.down);
						for (var i = 0; i < this.options.length; i++) {
							if (
								this.options[i].doorType === 0 ||
								this.options[i].doorType === 2
							) {
								this.options.splice(i, 1); // 将使后面的元素依次前移，数组长度减1
								i--; // 如果不减，将漏掉一个元素
							}
						}
						if (callback) {
							callback();
						}
					})
					.then(() => {
						// this.getDCUData()
					});
			},
			// // 分页, 每页条数
			// pageSizeChangeHandle(val) {
			//   this.page = 1
			//   this.limit = val
			//   this.query()
			// },
			// // 分页, 当前页
			// pageCurrentChangeHandle(val) {
			//   this.page = val
			//   this.query()
			// },
		}
	}
</script>

<style scoped>
	.bg {
		background-color: #fff;
		border-radius: 10px;
		display: flex;
		align-items: center;
		/* height: 7.6vh; */
		/* min-height: 76px; */
		/* line-height: 7.6vh; */
		padding: 0.8vw 1.8vw;
	}

	.bg>>>.el-form--inline .el-form-item__content,
	.el-form--inline .el-form-item {
		vertical-align: middle !important;
	}

	.bg>>>.el-form-item {
		margin-bottom: 0;
	}

	.bg1 {
		background-color: #fff;
		border-radius: 10px;
		padding: 1.6vh 1.5vw;
		margin-top: 10px;
	}
</style>